<template>

        <div class="footer_guide border">
            <div class="guide_item" :class="{on: '/msite'===$route.path}" @click="goto('/msite')">
                <div class="item_icon">
                    <i class="iconfont icon--shanchu "></i>
                </div>
                <span class="item_font">外卖</span>
            </div>
            <div class="guide_item" :class="{on:'/search'===this.$route.path}" @click='goto("/search")'>
                <div class="item_icon">
                    <i class="iconfont icon-sousuo "></i>
                </div>
                <span class="item_font">搜索</span>
            </div>
            <div class="guide_item" :class="{on:'/order'===this.$route.path}" @click="goto('/order')">
                <div class="item_icon">
                    <i class="iconfont icon--dingdan"></i>
                </div>
                <span class="item_font">订单</span>
            </div>
            <div class="guide_item " :class="{on:'/profile'===this.$route.path}" @click="goto('/profile')">
                <div class="item_icon">
                    <i class="iconfont icon-wodeqianfenleishouye "></i>
                </div>
                <span class="item_font">我的</span>
            </div>

        </div>



</template>

<script>
    export default {
        name: "FooterGuide",
        methods:{
            goto(path){
                this.$router.replace(path)
            }
        }
    }
</script>

<style lang="stylus" scoped>
.footer_guide
    z-index:200
    position:fixed
    left:0
    right:0
    bottom:0
    height:1rem
    background-color:rgba(100,200,230,0.8)
    display:flex
    .guide_item
      display:flex
      height:1rem;
      flex:1
      text-align:center
      flex-direction:column
      justify-content:center
      align-items:center
    .on
        color:green
      .item_icon
          .iconfont
            display:block
            font-weight:800
            font-size:28px
      .item_font
        font-size:12px


</style>
